import {
  Container,
  ActionList,
  ActionItem,
  MarkDownBox,
  MenuList,
} from "./styled";
import Header from "@/componets/header";
import ReactMarkdown from "react-markdown";
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import remarkGfm from "remark-gfm";
import { Anchor, Button, Input, Rate, message } from "antd";
import MarkNav from "markdown-navbar";
import { xonokai } from "react-syntax-highlighter/dist/esm/styles/prism";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { Comments, addComment, getComments } from "@/api/user";
import "markdown-navbar/dist/navbar.css";
import moment from "moment";

const Detail = () => {
  const localtion = useLocation();
  const [editorValue, setEditorValue] = useState("");
  const [commentValue, setCommentValue] = useState("");
  const [comments, setComment] = useState<Comments[]>([]);

  useEffect(() => {
    setEditorValue(localtion.state?.content ?? "");
    getCommentFn();
  }, [localtion.state]);

  const getCommentFn = () => {
    const forumID = localtion.state._id;
    getComments({
      forumID,
    }).then((res) => {
      setComment(res);
      setCommentValue("");
    });
  };

  const handleAddComment = () => {
    if (!commentValue) {
      message.error("不能为空！！");
      return;
    }
    const forumID = localtion.state._id;
    const userID = sessionStorage.getItem("userID");
    addComment({
      forumID,
      userID,
      content: commentValue,
    }).then(getCommentFn);
  };

  return (
    <Container>
      <Header />
      <ActionList>
        <ActionItem>
          <Rate style={{ fontSize: "30px" }} count={1} />
        </ActionItem>
        {localtion.state.isForums && (
          <ActionItem
            onClick={() =>
              window.scrollTo({
                left: 0,
                top: document.body.scrollHeight,
                behavior: "smooth",
              })
            }
          >
            评论
          </ActionItem>
        )}
      </ActionList>
      <MenuList>
        <Anchor>
          <div className="markNav-title">文章目录</div>
          <MarkNav
            className="article-menu"
            source={editorValue}
            headingTopOffset={80}
          />
        </Anchor>
      </MenuList>
      <MarkDownBox>
        <h1>{localtion.state.title}</h1>
        <ReactMarkdown
          children={editorValue}
          components={{
            code({ node, inline, className, children, ...props }) {
              const match = /language-(\w+)/.exec(className || "");
              return !inline && match ? (
                <SyntaxHighlighter
                  children={String(children).replace(/\n$/, "")}
                  style={xonokai as any}
                  language={match[1]}
                  PreTag="div"
                  {...props}
                />
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              );
            },
          }}
          remarkPlugins={[remarkGfm]}
        />
      </MarkDownBox>
      {localtion.state.isForums && (
        <div
          style={{
            background: "#fff",
            width: "60vw",
            minHeight: "200px",
            padding: "25px",
            marginTop: "15px",
            marginLeft: "10%",
          }}
        >
          <div style={{ display: "flex", alignItems: "center" }}>
            <Input.TextArea
              placeholder="请输入评论~"
              onChange={(e) => setCommentValue(e.target.value)}
              value={commentValue}
              style={{ marginRight: "20px" }}
            />
            <Button type="primary" onClick={handleAddComment}>
              发送
            </Button>
          </div>
          <div>
            <h3 style={{ marginLeft: "10px" }}>评论信息</h3>
            <div style={{ padding: "10px" }}>
              {comments.map((it) => (
                <>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      marginBottom: "10px",
                    }}
                  >
                    <div
                      style={{
                        marginRight: "20px",
                        height: "50px",
                        width: "50px",
                        borderRadius: "50%",
                        background: "#62a6fa",
                        color: "#fff",
                        fontSize: "10px",
                        lineHeight: "50px",
                        textAlign: "center",
                      }}
                    >
                      用户{it.userID}
                    </div>
                    <div style={{ width: "750px" }}>
                      {it.content}{" "}
                      <span style={{ color: "#777", fontSize: "10px" }}>
                        {'发布于'+moment(it.created_at).format("YY-MM-DD hh:mm")}
                      </span>
                    </div>
                  </div>
                </>
              ))}
            </div>
          </div>
        </div>
      )}
    </Container>
  );
};

export default Detail;
